<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs class="tab-left" v-model="activeName">
          <el-tab-pane label="销售额" name="sale"></el-tab-pane>
          <el-tab-pane label="访问量" name="visit"></el-tab-pane>
        </el-tabs>
        <div class="tab-right">
          <span @click="setDay">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
          <el-date-picker
            type="daterange"
            style="margin: 0 10px; width: 250px"
            size="mini"
            v-model="date"
			format="yyyy年MM月dd日"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="16">
            <div class="charts" height="400" ref="charts"></div>
          </el-col>
          <el-col :span="8">
            <ul class="list-rank">
				<h3 style="margin-bottom:10px">门店{{title}}排行</h3>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
              <li>
                <span class="list-icon">0</span>
                <span class="lvalue">肯德基</span>
                <span class="rvalue">123456</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs"
export default {
  props: {},
  components: {},
  data() {
    return {
		// 日期
	  date: "",
	//   选中的tab
	  activeName:"sale",
	  charts:null,
    };
  },
  created() {},
  mounted() {
	this.charts = echarts.init(this.$refs.charts);
    this.charts.setOption({
		title:{
			text:"销售额"
		},
      xAxis: {
        type: "category",
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    });
  },
  computed:{
	//   根据tab按钮切换标题
	title(){
		return this.activeName=="sale"?"销售量":"营业额"
	}
  },
  watch:{
	//   监听title属性改变后更改柱状图标题
	  title(){
		this.charts.setOption({
			title:{
				text:this.title
			}
		})
	  }
  },
  methods: {
	//   本日
	setDay(){
		let day=dayjs().format("YYYY-MM-DD")
		this.date=[day,day]
	},
	// 本周
	setWeek(){
		let day1=dayjs().date(0).format("YYYY-MM-DD")
		let day2=dayjs().date(6).format("YYYY-MM-DD")
		this.date=[day1,day2]
	},
	// 本月
	setMonth(){
		let day1=dayjs().startOf("month").format("YYYY-MM-DD")
		let day2=dayjs().endOf("month").format("YYYY-MM-DD")
		this.date=[day1,day2]
	},
	// 本年
	setYear(){
		let day1=dayjs().startOf("year").format("YYYY-MM-DD")
		let day2=dayjs().endOf("year").format("YYYY-MM-DD")
		this.date=[day1,day2]
	}
  },
};
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0 auto;
}

.clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tab-left {
  width: 100%;
}
.tab-right {
  position: absolute;
  right: 0;
}
.tab-right span {
  margin: 0 10px;
}
.charts {
  width: 100%;
  height: 400px;
}
.list-rank {
  width: 100%;
  height: 400px;

  list-style: none;
}
.list-rank li {
  width: 100%;
  height: 10%;
  position: relative;
}
.list-icon {
  width: 20px;
  display: inline-block;
  text-align: center;
  height: 20px;
  line-height: 20px;
  background-color: black;
  position: absolute;
  color: white;
  border-radius: 50%;
}
.lvalue {
  position: absolute;
  left: 40px;
}
.rvalue {
  position: absolute;
  right: 0;
}
</style>
